<template>
  <div>

    <Panel title="集团站点映射" useBack>
      <div slot="body">
          <div class="title" style="padding: 20px 0">
              {{name}}
          </div>
          <!-- <div class="title">充电枪列表：</div> -->
        <div class="title tab">
              已绑定站点：
          </div>
          <div class="site-mold">
            
            <span @click="deleteBand(item.id)" class="site-box color iconfont icon-shanchu band" v-for="(item,index) in parkSite" :key="index">{{item.siteName}}</span>
              <TablePager
              slot="pager"
              v-if="pager1.use"
              :size="pager1.size"
              :pageChange="pageChange1"
              :show-total="pager1.showTotal"
              :total="pager1.total"
              :current="pager1.current"
            >
              <span class="demonstration">GO></span>
            </TablePager>
          </div>
          <div class="title tab">全部站点：</div>
          <div class="site-mold">
            <span @click="addBand(item.id, index)" class="site-box iconfont icon-jia" v-for="(item,index) in noBand" :key="index">{{item.name}}</span>
            <!-- <TablePager
            slot="pager"
            v-if="pager.use"
            :size="pager.size"
            :pageChange="pageChange"
            :show-total="pager.showTotal"
            :total="pager.total"
            :current="pager.current"
          >
            <span class="demonstration">GO></span>
          </TablePager> -->
          </div>
      </div>
    </Panel>
  </div>
</template>
<script>
import Panel from "@/components/Panel";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
import FileUpload from '@/components/FileUpload';
import request from "@/tools/request";
import TablePager from "@/components/Pager";
import { objectFilter } from "@/tools/array";
import  "@/assets/iconfont.css";

export default {
  name: 'cameraGuns_',
  components: {
    FileUpload,
    Panel,
    ModalPanel,
    ModifyForm,
    TablePager
  },
  data() {
    return {
      siteList: [],
      parkSite:[],
      noBand:[],
      id: '',
      site: '',
      pileList: [],
      name: '',
      pager: {
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      pager1: {
        use: true,
        total: 0,
        current: 1,
        size: 40,
        showTotal: true
      },
    };
  },
  computed: {
 

  },
  methods: {
    //获取站点
    async iotSite(){
      let { list } = await request({
      url: "/iot/site/select",
      method: "POST",
      data: {}
      });
      this.siteList = list
    },
    //已绑定的充电枪
    async fetchData(type){
      let res = await request({
        url: "/group/map/list",
        method: "POST",
        data: { companyId: this.id, page:this.pager1.current, size: this.pager1.size}
      });
      let data = res.page.list
      this.parkSite =data
      this.pager1.total = res.page.totalCount
      this.pager1.current = res.page.currPage
      if(type !=1){
        const ids = data.map(item => item.siteId);
        console.log('ids',ids)
        this.getPiles(ids)
      }
      
    },
    pageChange1(val) {
      this.pager1.current = val;
      this.fetchData();
    },
    //未绑定的站点
    async getPiles(ids){
      let res = await request({
        url: `/iot/site/select`,
        method: "POST",
        data: {}
      });
      let data = res.list
      let site = []
      data.map(item => {
        if(ids.indexOf(item.id)<0){
          site.push(item)
        }
      })
      this.noBand = site
      // this.pager.total = res.page.totalCount
      // this.pager.current = res.page.currPage
    },
    // pageChange(val) {
    //   this.pager.current = val;
    //   this.getPiles();
    // },
   
    async addBand(siteId, index){
        let url = '/group/map/add'
        let groupCompanyId = this.id
        let res = await request({
            url: url,
            method: "POST",
            data: { groupCompanyId, siteId }
        });
        if (res.code !== 0) return
        let noBand = this.noBand
        noBand.splice(index, 1)
        this.noBand = noBand
        this.fetchData(1)
    },
    async deleteBand(ids){
        let url = '/group/map/delete'
        let res = await request({
            url: url,
            method: "POST",
            data: [ids]
        });
        if (res.code !== 0) return
        let parkSite = this.parkSite  
        parkSite.splice(parkSite.findIndex(item=>item.siteId===ids), 1)
        this.parkSite = parkSite
        // this.getPiles()
    },
  },
  mounted(){
  },
  created() {
    if(this.$route.query.id)
      this.id = this.$route.query.id
      this.name = this.$route.query.name
    //   this.fetchData()
      this.fetchData()
      // this.getPiles()
    //    this.getSite()
  }
};
</script>

<style lang='scss' >
.all-site{
  display: flex;
}
.site-block{
  border: 1px solid #66b1ff;
    padding: 8px;
    border-radius: 5px;
    display: flex;
}
.site-mold{
    // display: flex;
    // align-items: center;
    // justify-content: flex-start;
    // flex-wrap: wrap;
    margin: 20px 0;
}
.site-box{
    padding: 4px 6px;
    background: #dfdfdf;
    border-radius: 2px;
    margin: 7px;
    cursor: pointer;
    line-height: 37px;
}
.color {
    background: #2b87e7;
    color: #ffffff;
}
.i-lot{
  margin: 0 5px;
  font-size: 20px;
}
.band{
  margin: 2px 8px;
}
.title{
    font-size: 16px;
    font-weight: 700;
    padding: 10px 0;
}
.name-box {
    display: flex;
    align-items: center;
    margin: 4px 0;
}
.circle {
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: #089bc0;
}
.tab{
  background: #e0e8f1;
    padding-left: 10px;
}
</style>